<!DOCTYPE html>
<html>

<head>
    <script src="./jquery-3.3.1.min.js"></script>
    <meta charset="utf-8">
    <title>冒泡模型</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; flex-direction: column; }
        .red.active { background: red; }
        .blue.active { background: blue; }
        .green.active { background: green; }
        .yellow.active { background: yellow; }
        .orange.active { background: orange; }
        .purple.active { background: purple; }
        div { border: 1px solid black; border-radius: 50%; padding: 20px; background-color: white; display: flex; transition: all 0.5s; }
        .purple { width: 300px; height: 300px; }
        .refresh { padding: 10px; margin-top: 50px; font-size: 24px; line-height: 1.4; }
    </style>
</head>

<body>
    <div class="red">
        <div class="blue">
            <div class="green">
                <div class="yellow">
                    <div class="orange">
                        <div class="purple">

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <button class="refresh">刷新</button>
    <script>
        var n = 0

        $('div').on('click', function (e) {
            var timer = setTimeout(function () {
                $(e.currentTarget).addClass('active')
                console.log('timerID: ' + timer + ' n：' + n) // n 永远都是 6
            }, n * 500)
            n += 1
        })

        $('.refresh').on('click', function () {
            window.location.reload()
        })

    </script>
</body>

</html>